<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    :width="1400"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    title="新建房源"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
        <a-row :gutter="16" type="flex">
          <a-col :span="8">
            <a-form-item label="楼盘名称">
              <a-input disabled v-decorator="['Name']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="楼盘地址">
              <a-input disabled v-decorator="['Address']"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8"></a-col>
          <a-col :span="8">
            <a-form-item label="栋">
              <a-input
                v-decorator="['Roof', { rules: [{ required: true, message: '请输入楼盘栋号' }] }]"
                placeholder="请输入楼盘栋号"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="单元">
              <a-input
                v-decorator="['Unit', { rules: [{ required: true, message: '请输入楼盘单元' }] }]"
                placeholder="请输入楼盘单元"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="总面积（㎡）">
              <a-input-number
                v-decorator="['TotalArea', { rules: [{ required: true, message: '请输入总面积' }] }]"
                placeholder="请输入总面积"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="房源状态">
              <a-select
                v-decorator="['Mode', { rules: [{ required: true, message: '请选择房源状态' }] }]"
                placeholder="请选择房源状态"
              >
                <a-select-option  value="1">正常</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :span="8">
            <a-form-item label="起始楼层">
              <a-input-number
                v-decorator="['StartFloor', { rules: [{ required: true, message: '请输入起始楼层' }] }]"
                placeholder="请输入起始楼层"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="总楼层">
              <a-input-number
                v-decorator="['TotalFloor', { rules: [{ required: true, message: '请输入总楼层' }] }]"
                placeholder="请输入总楼层"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="每层最多套数(套)">
              <a-input-number
                v-decorator="['AvgCount', { rules: [{ required: true, message: '请输入每层最多套数' }] }]"
                placeholder="请输入每层最多套数"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="默认面积(㎡)">
              <a-input-number
                v-decorator="['AvgArea', { rules: [{ required: true, message: '请输入默认面积' }] }]"
                placeholder="请输入默认面积"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="默认结构">
              <a-select
                v-decorator="['AvgStructure', { rules: [{ required: true, message: '请选择默认结构' }] }]"
                placeholder="请选择默认结构"
                :options="structureOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="默认状态">
              <a-select
                v-decorator="['AvgMode', { rules: [{ required: true, message: '请选择默认状态' }] }]"
                placeholder="请选择默认状态"
                :options="houseTypeOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="房屋所属">
              <a-input
                v-decorator="['PropertyNo', { rules: [{ required: true, message: '请选择默认状态' }] }]"
                placeholder="请输入房屋所属"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider orientation="left"> 特殊楼层信息 </a-divider>
        <y-button type="primary" icon="plus" class="m-b-16" @click="visibleSpecial = true">添加楼层</y-button>
        <a-table
          :pagination="false"
          size="small"
          bordered
          :rowKey="(record, index) => index"
          :columns="specialColumns"
          :data-source="specialData"
        >
          <span slot="index" slot-scope="text, record, index">{{ index + 1 }} </span>
          <div slot="action" slot-scope="text, record, index">
            <y-button type="link" @click="handleEditSpecial(index)">修改</y-button>
            <a-popconfirm title="确认删除此楼层？" @confirm="handleDelSpecial(index)">
              <y-button type="link" class="text-error">删除</y-button>
            </a-popconfirm>
          </div>
        </a-table>
      </a-form>
    </a-spin>
    <special-form
      :visible.sync="visibleSpecial"
      :defaultData="specialData[specialIndex]"
      @change="handleSpecialChange"
    />
  </a-modal>
</template>

<script>
import specialForm from './specialForm.vue'
import { getDropdownList, getHouseTypeColor } from '@/api/common'
import { postHouseResources } from '@/api/followUpManagement'
export default {
  components: {
    specialForm
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: ''
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'plan' }),
      isSubmiting: false,
      spinning: false,
      visibleSpecial: false,
      specialColumns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '楼层',
          align: 'center',
          dataIndex: 'LC'
        },
        {
          title: '套数',
          align: 'center',
          dataIndex: 'TS'
        },
        // {
        //   title: '备注',
        //   align: 'center',
        //   dataIndex: 'remark'
        // },
        {
          title: '操作',
          align: 'center',
          width: '120px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      specialData: [],
      specialIndex: '',
      houseTypeOptions: [],
      structureOptions: []
    }
  },
  methods: {
    fetchData () {
      const getHouseType = getHouseTypeColor({ PmKey: 'HoueTypeColor' })
      const getStructure = getDropdownList({ PmKey: 'Structure' })
      this.spinning = true
      Promise.all([getHouseType, getStructure])
        .then((res) => {
          this.houseTypeOptions = res[0].map((e) => {
            return {
              value: e.PMNAME,
              label: `${e.PMNAME}${e.PMBREAK ? `(${e.PMBREAK})` : ''}`
            }
          })
          this.structureOptions = res[1].map((e) => {
            return {
              value: e.DROPKEY,
              label: e.DROPVALUE
            }
          })
          this.$nextTick(() => {
            const { name: Name, address: Address } = this.$route.query
            this.form.setFieldsValue({
              Name,
              Address
            })
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.form.resetFields()
      this.$emit('update:visible', false)
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleSpecialChange (e) {
      const { type, value } = e
      if (type === 'add') {
        this.specialData.push(value)
      } else {
        this.specialData[this.specialIndex] = value
        this.specialIndex = ''
      }
    },
    handleDelSpecial (i) {
      this.specialData.splice(i, 1)
    },
    handleEditSpecial (i) {
      this.specialIndex = i
      this.visibleSpecial = true
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          values.TSLCLIST = this.specialData
          this.isSubmiting = true
          postHouseResources({
            State: 'add',
            lpid: this.$route.params.id,
            houseresources: values
          })
            .then((res) => {
              this.$message.success('房源添加成功！')
              this.$emit('success', true)
              this.close()
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
  <style lang="less" scoped>
/deep/ .ant-form-item-label {
  white-space: normal;
  padding-right: 12px;
}
/deep/ .ant-calendar-picker,
.ant-input-number {
  width: 100%;
}
</style>
